<template>
  <div id="map" class="map"></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import layerTile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import Overlay from "ol/Overlay";
import View from "ol/View";
import TileArcGISRest from "ol/source/TileArcGISRest";
import { Tile as TileLayer } from "ol/layer";
import { FullScreen, defaults as defaultControls } from "ol/control";

import CONSTANT from "@/config/constant.js";

export default {
  name: "fullScreen",

  methods: {
    createMap() {
      var map = new Map({
        controls: defaultControls().extend([new FullScreen()]), //第一种
       target: "map",
        layers: [
          // new TileLayer({
          //   source: new TileArcGISRest({
          //     url: CONSTANT.GIS_URL
          //   })
          // }),
          new layerTile({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });

      // 第二种：
      // map.addControl(new FullScreen());
    }
  },

  mounted() {
    this.createMap();
  }
};
</script>

<style lang="less" scoped>
.map {
  height: 100%;
}
.map:-webkit-full-screen {
  height: 100%;
  margin: 0;
}
.map:-ms-fullscreen {
  height: 100%;
}
.map:fullscreen {
  height: 100%;
}
.map .ol-rotate {
  top: 3em;
}
</style>